<template>
	<view>
		<view class="wrap">
			<text class="txt">宝贝评价({{mesdata.length}})</text>
			<block v-for="(item,index) in mesdata.data" :key="index">
				<view class="wrap-nickname">
					<view class="wrap-nicknameas">
						<image :src="item.avater" mode=""></image>
						<view>{{item.nickname}}</view>
					</view>
					<text class="times">{{item.timer}}</text>
				</view>
				<view class="wrap-message">{{item.message}}</view>
			</block>
		</view>
		<view class="inputsAll" @click="navgetto">
			<view class="inputs">
				<text>评论一下吧</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				mesdata: {
					code: 201,
					length: 3,
					data: [{
							"nickname": "佛山黄飞鸿",
							"avater": "../../../static/logo.png",
							"timer": "2021-9-06",
							"message": "就和奈斯，有时间一定去"
						},
						{
							"nickname": "花子占爷",
							"avater": "../../../static/tab/avatar.png",
							"timer": "2021-10-05",
							"message": "刚上次去过，人特别多，记得要戴口罩"
						},
						{
							"nickname": "红颜旧",
							"avater": "../../../static/tab/logoW.png",
							"timer": "2021-11-05",
							"message": "哈哈哈，这里真的特别棒"
						}
					]
				}
			}
		},
		methods: {
			navgetto() {
				uni.navigateTo({
					url: '../inputmess/inputmess'
				});
			}
		},
		created() {
			console.log(this.mesdata)
		}
	}
</script>

<style scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		margin-bottom: 70upx;
	}

	.wrap .txt {
		padding: 20upx 20upx;
		font-weight: bold;
	}

	.wrap-nickname {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10upx 20upx;
	}

	.wrap-nicknameas {
		display: flex;
		justify-content: start;
		align-items: center;
	}

	.wrap-nickname image {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.wrap-nickname view {
		font-size: 25upx;
		color: #aaaaaa;
	}

	.wrap-message {
		padding: 0 0 20upx 20upx;
	}

	.times {
		font-size: 25upx;
		color: #aaaaaa;
	}

	.inputsAll {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20upx;

	}

	.inputs {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 70upx;
		line-height: 70upx;
		border-radius: 40upx;
		background-color: #eeeeee;
		text-align: start;
		padding: 0 15upx;
		box-sizing: border-box;
		margin-bottom: 5upx;
	}

	.inputtext {
		width: 97%;
		height: 430upx;
		background-color: #ffffff;
		border: 2px solid #Ffd300;
		border-radius: 10upx;
		margin: 10upx 10upx;
		padding: 80upx 25upx;
		box-sizing: border-box;
	}

	/* 评价 */
	.btn {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 20upx;
	}

	.btn view {
		border-radius: 8upx;
		background-color: #Ffd300;
		padding: 10upx 40upx;
	}

	textarea {
		color: #949494;
	}
</style>
